<!-- 承租公房添加/修改 -->
<template>
  <a-modal
    :visible="visible"
    :title="`${$isEmpty(data) ? '添加' : '修改'}承租公房`"
    :okText="$isEmpty(data) ? '添加' : '修改'"
    :confirmLoading="isSubmit"
    :afterClose="handleClose"
    :width="996"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-row :gutter="16" type="flex">
        <a-col :span="12">
          <a-form-item label="成员类别">
            <a-select
              placeholder="请选择成员类别"
              v-decorator="['DetailCategory', { rules: [{ required: true, message: '请选择成员类别' }] }]"
              @change="handleDetailCategoryChange"
            >
              <a-select-option value="保障成员及家庭成员">保障成员及家庭成员</a-select-option>
              <a-select-option value="未纳入保障成员">未纳入保障成员</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="家庭成员姓名">
            <a-select
              placeholder="请选择家庭成员姓名"
              v-decorator="['DetailName', { rules: [{ required: true, message: '请选择家庭成员姓名' }] }]"
              @change="handleDetailNameChange"
            >
              <a-select-option :value="item.name" v-for="(item, index) in peopleOptions" :key="index">{{
                item.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="公房所有权单位名称">
            <a-input
              placeholder="公房所有权单位名称"
              v-decorator="['PublicUnit', { rules: [{ required: true, message: '请输入公房所有权单位名称' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="成员身份证号">
            <a-input
              disabled
              placeholder="请输入成员身份证号"
              v-decorator="['DetailIDcard', { rules: [{ required: true, message: '请选择家庭成员姓名' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="租住公房建筑面积(m²)">
            <a-input-number
              placeholder="请输入租住公房建筑面积"
              v-decorator="['PublicArea', { rules: [{ required: true, message: '请输入租住公房建筑面积(m²)' }] }]"
              :formatter="(value) => `${value}㎡`"
              :parser="(value) => value.replace('㎡', '')"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="房屋详细地址">
            <a-textarea
              placeholder="请输入房屋详细地址"
              v-decorator="['HouseAddress', { rules: [{ required: true, message: '请输入房屋详细地址' }] }]"
              :auto-size="{ minRows: 1, maxRows: 2 }"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="成套情况">
            <a-select
              placeholder="请选择成套情况"
              v-decorator="['IfComplete', { rules: [{ required: true, message: '请选择成套情况' }] }]"
            >
              <a-select-option value="成套">成套</a-select-option>
              <a-select-option value="非成套">非成套</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12"></a-col>
        <a-col :span="12">
          <a-form-item label="说明">
            <a-textarea
              placeholder="说明"
              v-decorator="['Remark', { initialValue: '' }]"
              :auto-size="{ minRows: 2, maxRows: 6 }"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  data () {
    return {
      isSubmit: false,
      form: this.$form.createForm(this, { name: 'leaseHouse' }),
      peopleOptions: []
    }
  },
  methods: {
    fetchData () {
      if (!this.$isEmpty(this.data)) {
        this.$nextTick(() => {
          this.form.setFieldsValue(
            pick(this.data, [
              'DetailCategory',
              'DetailName',
              'PublicUnit',
              'DetailIDcard',
              'PublicArea',
              'HouseAddress',
              'IfComplete',
              'Remark'
            ])
          )
        })
      }
    },
    handleClose () {
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
      this.form.resetFields()
    },
    handleDetailCategoryChange (e) {
      if (e === '未纳入保障成员') {
        this.peopleOptions = this.options[1]
      } else {
        this.peopleOptions = this.options[0]
      }
      if (this.$isEmpty(this.peopleOptions)) {
        this.$message.error('当前成员类别没有家庭成员数据，请重新选择')
      }
      this.form.setFieldsValue({
        DetailIDcard: '',
        DetailName: ''
      })
    },
    handleDetailNameChange (e) {
      this.form.setFieldsValue({
        DetailIDcard: this.peopleOptions.find((item) => item.name === e).idCard
      })
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const data = Object.assign({}, values, {
            ApplyNo: this.data.ApplyNo || '',
            ID: this.data.ID || '',
            HousesCategory: '承租公房',
            PropertyName: this.data.PropertyName || '',
            PropertyArea: this.data.PropertyArea || '0',
            PropertyOwnArea: this.data.PropertyOwnArea || '0',
            PropertyNo: this.data.PropertyNo || ''
          })
          this.$emit('change', {
            type: this.$isEmpty(this.data) ? 'add' : 'edit',
            data
          })
          this.handleClose()
        }
      })
    },
    handleCancel () {
      this.handleClose()
    }
  }
}
</script>
<style lang="less" scoped>
.ant-input-number {
  width: 100%;
}
.tips {
  color: rgb(146, 146, 146);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
